<script setup>
import { ref, shallowRef, triggerRef } from 'vue'

// shallowRef
// 和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。
const state = shallowRef({ count: 1 })
const state1 = ref({ count: 1 })
console.log(state.value) // 变为正常对象，失去响应式
console.log(state1.value) // proxy响应式对象
function add() {
  // 不会触发更改
  state.value.count++
  // 会触发更改。 只有对 .value 的访问是响应式的。
  // state.value = { count: 2 }
  // 触发更改
  // triggerRef，强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
  triggerRef(state)
  // state1.value.count++
  console.log(state.value)
  console.log(state1.value)
}
</script>

<template>
  <h1>state:{{ state }}</h1>
  <h1>state1:{{ state1 }}</h1>
  <button @click="add">++</button>
</template>

<style></style>
